/* 头部制作 */

.header {
  display: flex;
  position: sticky;
  height: 48px;
  width: 100%;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
  min-width: 1375px;
  line-height: 48px;
  padding: 0 24px;
}
.toolbar-left {
  display: inline-block;
  width: 525px;
  height: 100%;
}
/* logo盒子制作 */
.toolbar-left .header-logo {
  float: left;
  margin-right: 8px;
  vertical-align: middle;
  line-height: 44px;
}

.header-logo a img {
  width: 80px;
  height: 44px;
}
/* logo盒子旁边的工具栏 */

.toolbar-left ul {
  float: left;
}
.toolbar-left ul li {
  float: left;
  height: 100%;
  padding: 0 10px;
  font-size: 14px;
}
.toolbar-left ul li a {
  display: block;
  color: #222226;
}
.toolbar-left ul li:hover {
  background-color: rgb(240, 240, 245);
}
.toolbar-left ul li img {
  vertical-align: middle;
  width: 19px;
  margin-top: -4px;
  margin-left: -2px;
}

/* 头部搜索栏 */
.header .search {
  /* position: absolute; */
  /* top: 0; */
  /* left: 610px; */
  padding: 8px 0;
  margin: 0 40px;
  margin-right: 60px;
  width: calc(100% - 650px - 370px);
  min-width: 320px;
  height: 100%;
}
.header .search input[type="text"] {
  height: 100%;
  width: calc(100% - 88px);
  background-color: #f5f6f7;
  border: 1px solid #e8e8ed;
  border-radius: 16px 0 0 16px;
  vertical-align: text-bottom;
  font-size: 14px;
  text-indent: 32px;
}
.search button {
  float: right;
  height: 100%;
  line-height: calc(48px - 16px);
  width: 88px;
  text-align: left;
  background-color: #fc5531;
  border-radius: 0 16px 16px 0;
}
.search button i {
  vertical-align: middle;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../images/csdn-white-search.png) no-repeat center -2px;
  background-size: 100%;
  margin-left: 14px;
}
.search-btn span {
  color: #fff;
}

/* 头部右侧工具 */

.header .header-right {
  width: 360px;
  height: 100%;
}

.header-right ul li {
  float: left;
  padding: 0 8px;
}
.header-right ul li a {
  color: #222226;
  font-size: 14px;
}
.header-right ul li a:hover {
  color: #222226;
}

.header-right ul .gift img {
  position: relative;
  vertical-align: middle;
  width: 14px;
  top: -1px;
  left: 0px;
}
.header-right ul .create {
  padding-right: 0;
}
.header-right ul .create a {
  display: inline-block;
  min-width: 88px;
  height: 32px;
  line-height: 32px;
  background: #fc5531;
  border-radius: 20px;
  text-align: center;
  color: #fff;
}

.header-right ul .create .feather {
  display: inline-block;
  width: 20px;
  height: 20px;

  position: relative;
  vertical-align: middle;
  background: url(/images/clion.png) no-repeat -38px -20px;
  background-size: 300%;
  top: -2px;
  margin-right: 2px;
}
.header-right ul .create .create-right {
  position: relative;
  display: inline-block;
  background: 0 0;
  width: 10px;
  height: 7px;
  margin-left: 7px;
  vertical-align: middle;
  background: url(../images/creater-right.png) no-repeat center center;
  background-size: 100%;
  top: -1px;
}
